<template>
  <div class="clock">
    <canvas id="solar" width="300" height="300"></canvas>
  </div>
</template>

<script>
export default {
  name: "Clock",
  mounted() {
    init();
    function init() {
      let canvas = document.querySelector("#solar");
      let ctx = canvas.getContext("2d");
      draw(ctx);
    }
    function draw(ctx) {
      // requestAnimationFrame：定时执行重绘的方法
      requestAnimationFrame(function step() {
        drawDial(ctx); //绘制表盘
        drawAllHands(ctx); //绘制时分秒针
        requestAnimationFrame(step);
      });
    }
    /*绘制表盘*/
    function drawDial(ctx) {
      let pi = Math.PI;

      ctx.clearRect(0, 0, 300, 300); //清除所有内容
      ctx.save();

      ctx.translate(150, 150); //一定坐标原点到原来的中心
      ctx.beginPath();
      // arc()函数：以0,0为圆心，148为半径，0位其实弧度，2 * pi为结束弧度，默认顺时针（false）
      ctx.arc(0, 0, 145, 0, 2 * pi); //绘制圆周
      ctx.stroke();
      ctx.closePath();

      for (let i = 0; i < 60; i++) {
        //绘制刻度。
        ctx.save();
        ctx.rotate(-pi / 2 + (i * pi) / 30); //旋转坐标轴。坐标轴x的正方形从 向上开始算起
        ctx.beginPath();
        ctx.moveTo(110, 0); // moveTo()把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标
        ctx.lineTo(140, 0);
        ctx.lineWidth = i % 5 ? 2 : 4;
        ctx.strokeStyle = i % 5 ? "#69aff0" : "#960e5d";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }
      ctx.restore();
    }
    /*绘制时分秒针*/
    function drawAllHands(ctx) {
      let time = new Date();

      let s = time.getSeconds();
      let m = time.getMinutes();
      let h = time.getHours();

      let pi = Math.PI;
      let secondAngle = (pi / 180) * 6 * s; //计算出来s针的弧度
      let minuteAngle = (pi / 180) * 6 * m + secondAngle / 60; //计算出来分针的弧度
      let hourAngle = (pi / 180) * 30 * h + minuteAngle / 12; //计算出来时针的弧度

      drawHand(hourAngle, 60, 6, "red", ctx); //绘制时针
      drawHand(minuteAngle, 106, 4, "green", ctx); //绘制分针
      drawHand(secondAngle, 129, 2, "blue", ctx); //绘制秒针
    }
    /*绘制时针、或分针、或秒针
     * 参数1：要绘制的针的角度
     * 参数2：要绘制的针的长度
     * 参数3：要绘制的针的宽度
     * 参数4：要绘制的针的颜色
     * 参数4：ctx
     * */
    function drawHand(angle, len, width, color, ctx) {
      ctx.save();
      ctx.translate(150, 150); //把坐标轴的原点平移到原来的中心
      ctx.rotate(-Math.PI / 2 + angle); //旋转坐标轴。 x轴就是针的角度
      ctx.beginPath();
      ctx.moveTo(-4, 0);
      ctx.lineTo(len, 0); // 沿着x轴绘制针
      ctx.lineWidth = width;
      ctx.strokeStyle = color;
      ctx.lineCap = "round"; //线条末端样式
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    }
  },

};
</script>

<style lang="less" scoped>
  .clock {
    canvas {
      position:fixed;
      display: block;
      width: 100px;
      height: 100px;
      top: 70px;
      right: 15px;
    }
  }
</style>